<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>APP下载页面</title>
                <link rel="stylesheet" type="text/css" href="/static/default/css/common.css"/>
                <style type="text/css">
		.app-bj {
			width: 100%;
			height: 472px;
			margin-bottom: -472px;
			background: #f2fcf7;
		}
		.app-demo {
			height: 900px;
			background: url(<{$style_dir}>/img/app/app-demo.jpg) no-repeat;
			position: relative;
		}
		.app-demo span.iphone {
			width: 365px;
			height: 660px;
			position: absolute;
			opacity: 0;
		}
		.app-demo span.iphone-w {
			background: url(<{$style_dir}>/img/app/iphone-w.png);
			top: 167px;
			right: 440px;
			z-index: 2;
		}
		.app-demo span.iphone-b {
			background: url(<{$style_dir}>/img/app/iphone-b.png);
			top: 101px;
			right: -20px;
			z-index: 1;
		}
		.app-download {
			width: 310px;
			height: 121px;
			position: absolute;
			top: 553px;
			left: 118px;
		}
		.app-download .app-btn a {
			width: 170px;
			height: 52px;
			float: right;
			border-radius: 5px;
		}
		.app-download .app-btn a.android {
			margin-top: 17px;
		}
		.app-code {
			position: relative;
			margin-left: -30px;
		}
		.app-code span {
			width: 115px;
			height: 115px;
			position: absolute;
			top: -25px;
			left: 13px;
			opacity: 0;
		}
		.share {
			position: absolute;
			top: 732px;
			left: 118px;
		}
		.share li {
			float: left;
			margin-right: 40px;
		}
		.share li a {
			width: 41px;
			height: 35px;
			background-image: url(<{$style_dir}>/img/icon-tab.png);
			/*background-position: 0 -259px;*/
		}
		.share li a:hover {
			background-position-y: -304px;
		}
		.icon-app-wechat {
			background-position: 0px -259px;
		}
		.icon-app-qq {
			background-position: -41px -259px;
		}
		.icon-app-weibo {
			background-position: -82px -259px;
		}
		.icon-app-friend {
			background-position: -123px -259px;
		}
		ul li a div.app-ewm-box {
		    width: 125px;
		    background-color: #fff;
		    padding: 0 20px 20px;
		    border: 5px solid #e5e5e5;
		    border-radius: 5px;
		    position: absolute;
		    top: -130px;
		    left: -58%;
		    display: none;	
	    }
		ul li a div.app-ewm-box p {
		    line-height: 30px;
		    font-size: 14px;
		    text-align: center;
		    color: #666;
		}	 
		.ewm-pic{
			margin: 0 10px;
		}   
	</style>
	</head>
	<body>
		<div class="app-bj"></div>
		<div class="app-demo w1200">
			<span class="iphone iphone-w"></span>
			<span class="iphone iphone-b"></span>
			<div class="app-download">
				<div class="app-btn">
					<a href="javascript:void(0);" class="ios"></a>
					<a href="javascript:void(0);" class="android"></a>
				</div>
				<div class="app-code">
					<span class="ios">
						<img src="<{$style_dir}>/img/app/code-ios.jpg"/>
					</span>
					<span class="android">
						<img src="<{$style_dir}>/img/app/code-android.png"/>
					</span>
				</div>
			</div>
			<ul class="share fast-share">
				<li data-key="a0" class="wx"><a href="javascript:;" class="icon-app-friend"></a></li>
				<li data-key="a1" class="wx"><a href="javascript:;" class="icon-app-wechat"></a></li>
				<li data-key="a2"><a href="javascript:;" class="icon-app-qq"></a></li>
				<li data-key="a3"><a href="javascript:;" class="icon-app-weibo"></a></li>
			</ul>
		</div>
		
		
                <script src="<{$style_dir}>/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="<{$style_dir}>/js/jquery.qrcode.min.min.js" type="text/javascript"></script>
		<script type="text/javascript">
                    String.Format=function(){if(0==arguments.length)return null;for(var b=arguments[0],a=1;a<arguments.length;a++)b=b.replace(new RegExp("\\{"+(a-1)+"\\}","gm"),arguments[a]);return b};
			$(function(){
				$(".app-demo .iphone-w").animate({"right":"340px","opacity":'1'},800);
				$(".app-demo .iphone-b").animate({"right":"80px","opacity":'1'},800);
				$(".app-demo .app-download .app-btn a").hover(function(){
					index = $(this).parent().children().index($(this));
					$(".app-demo .app-download .app-code span").eq(index).css('top',"-25px");
					$(".app-demo .app-download .app-code span").eq(index).stop(true).animate({"top":"3px","opacity":"1"},1000);
				},function(){
					$(".app-demo .app-download .app-code span").eq(index).stop(true).animate({"opacity":"0"},500);
				});
				//app下载--分享给  微信好友/朋友圈
				$(".wx").hover(function(){
						index = $(this).parent().children().index($(this));
						$(".app-demo .app-download .app-code span").eq(0).css('top',"-25px");
						$(".app-demo .app-download .app-code span").eq(0).stop(true).animate({"top":"3px","opacity":"1"},1000);
					},function(){
						$(".app-demo .app-download .app-code span").eq(0).stop(true).animate({"opacity":"0"},500);
				});				
				$(".fast-share li").click(function(e) {
				    var t,
				        n = "",
				        a = "https://itunes.apple.com/us/app/dan-liu-liu-hu-lian-wang-jin/id1193523261?mt=8",
				        i = encodeURIComponent("弹溜溜红包壕送，拆红包致手抽筋"),
				        q = encodeURIComponent("弹溜溜，儿时快乐的指尖回忆。在这里发现更多志趣相投的伙伴；参与最前沿的互联网金融体验；探索最酷最好玩的生活..."),
				        o = (encodeURIComponent("送你一个现金红包，快来领！"), encodeURIComponent("https://itunes.apple.com/us/app/dan-liu-liu-ping-tai/id1094659862?l=zh&ls=1&mt=8")),
				        r = encodeURIComponent("弹溜溜，儿时快乐的指尖回忆。在这里发现更多志趣相投的伙伴；参与最前沿的互联网金融体验；探索最酷最好玩的生活...");
				    switch ($(this).attr("data-key")) {
				    	case "a2":
				    			t = "弹溜溜-QQ好友", e = "http://connect.qq.com/widget/shareqq/index.html?url={0}&desc"+ "=" +q + "&pic={2}" + "&site" + "=bshare", n = String.Format(e, a);
				    			$(".mainInfo .appText").html(q);
				    			break;
				        case "a3":
				                t = "弹溜溜-新浪", e = "http://service.weibo.com/share/share.php?url={0}&title=" + r + "&pic={2}", n = String.Format(e, a, r, o);
				                break;
				        default:
				                return !1
				    }
				    if($(this).attr("data-key") != "a1" && $(this).attr("data-key") != "a0"){
				        var s = 650,
				        c = 650,
				        l = (window.screen.availHeight - 30 - c) / 2,
				        d = (window.screen.availWidth - 10 - s) / 2;
				        try {
				            "弹溜溜-" == t ? window.open(n, t, "width=700, height=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no") : window.open(n, t, "width=700, height=680, top=" + l + ", left=" + d + ", toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no")
				        } catch (u) {
				            window.open(n)
				        }
				    }
				});			
			});
		</script>
	</body>
</html>
